<script setup lang="ts">
type Prop = {
  podName?: string;
  namespace?: string;
  replicas?: number;
  active?: number;
  scalable?: boolean; // 是否可伸缩
};

const props = defineProps<Prop>();

const colors = [
  { color: "var(--el-color-danger)", percentage: 0 },
  { color: "var(--el-color-primary)", percentage: 1 },
  { color: "var(--el-color-success)", percentage: 100 }
];

const setScale = (aim: number) => {
  console.log("aim", aim);
};
</script>

<template>
  <div class="replicas-wrapper">
    <el-progress
      type="circle"
      :percentage="(active / replicas) * 100"
      :color="colors"
      :width="100"
      :stroke-width="12"
    >
      <template #default="{}">
        <span class="replicas-text">
          {{ active ?? "0" }}/{{ replicas ?? 0 }}
        </span>
      </template>
    </el-progress>
    <div class="replicas-info">
      <span style="font-weight: 600; font-size: 17px">副本</span>
      <span>期望副本数: {{ replicas ?? "0" }}</span>
      <span>单前副本数: {{ active ?? "0" }}</span>
    </div>

    <div v-if="scalable" class="replicas-scale">
      <el-button icon="Plus" size="small" @click="setScale(replicas + 1)" />
      <div class="h-2" />
      <el-button icon="Minus" size="small" @click="setScale(replicas - 1)" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.replicas-wrapper {
  display: flex;
  padding: 10px 15px;
  background-color: #2f3e70;
  border-radius: 10px;
  gap: 15px;
}

.replicas-text {
  font-size: 1.25rem;
  color: var(--el-bg-color);
}

.replicas-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--el-bg-color);
}

.replicas-scale {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
